<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放器</title>
    <link rel="stylesheet" href="css/video.css">
</head>

<body>
    <figure>

        <figcaption>视频播放器 <br>Lazily date:2023-12-1</figcaption>

        <div class="player">
            <video src="./video/fun.mp4"></video>
            <div class="controls">

                <a href="javascript:;" class="switch fa fa-play"></a>
                <!-- 播放/暂停 -->

                <div class="progress">
                    <div class="line"></div>
                    <div class="bar"></div>
                </div>
                <!-- 播放进度 -->

                <div class="timer"></div>
                <span class="current">00:00:00</span>
                <!-- 当前播放时间/播放总时长 -->

                <a href="javascript:;" class="expand fa fa-arrows-alt"></a>
                <!-- 全屏/取消全屏 -->
            </div>
        </div>
    </figure>

</body>

</html>